<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<!-- 		响应式布局代码 -->
		<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no" />
		
		<!-- jQuery -->
		<script src="js/jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script>
		<!-- popper -->
		<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
		<!-- 加载bootstrap css样式 -->
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<!-- 加载bootstrap js脚本 -->
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
			
	</head>
	<body>
		
		<!--
			.container    			固定宽度
			.container-fluid   		100%宽度
		-->
		<div style="background-color: lightsalmon;">
			<h1>标题</h1>
			<p>网页内容</p>
		</div>
		<br />
		
		<div class="container" style="background-color: lightsalmon;">
			<h1>标题 container</h1>
			<p>网页内容.
			左右两边总会留一点空白</p>
		</div>
		<br />
		
		<div class="container-fluid" style="background-color: lightsalmon;">
			<h1>标题container-fluid</h1>
			<p>网页内容 100%占满</p>
		</div>
		<br />
		
		<!-- 
			栅格 把每一行拆分成12个格子
			
			row  一行 分成12个格子
			col  列   等分
			col-1   1~12
			
			堆叠
			.col-sm-n     <540px 进行堆叠
			.col-md-n     <720px 进行堆叠
			.col-lg-n     <960px  
			.col-xl-n     <1140px
			
		-->
		<div class="container">
			<div class="row">
				<div class="col bg-primary">1</div>
				<div class="col bg-danger">2</div>
				<div class="col bg-warning">3</div>
			</div>
		</div>
		<br />
		<div class="container">
			<div class="row">
				<div class="col-1 bg-primary">1</div>
				<div class="col-1 bg-danger">2</div>
				<div class="col-1 bg-warning">3</div>
				<div class="col-1 bg-primary">1</div>
				<div class="col-1 bg-danger">2</div>
				<div class="col-1 bg-warning">3</div>
				<div class="col-1 bg-primary">1</div>
				<div class="col-1 bg-danger">2</div>
				<div class="col-1 bg-warning">3</div>
				<div class="col-1 bg-primary">1</div>
				<div class="col-1 bg-danger">2</div>
				<div class="col-1 bg-warning">3</div>
			</div>
		</div>
		
		<br />
		<div class="container">
			<div class="row">
				<div class="col-3 bg-primary">1</div>
				<div class="col-3 bg-danger">2</div>
				<div class="col-3 bg-warning">3</div>
				<div class="col-3 bg-primary">1</div>
			</div>
			
			<div class="row">
				<div class="col-5 bg-primary">1</div>
				<div class="col-8 bg-warning">1</div>
			</div>
		</div>
		
		
		<br />
		
		<!-- 
		
			组合使用
			col-xl-3 col-lg-4  col-md-6
			col-xl-3 屏幕>1140px  一行内显示4个
			col-lg-4 屏幕>960px   一行内显示3个
			col-md-6 屏幕>720px   一行内显示2个
			         小于720px    堆叠(一行一个)
		-->
		<div class="container">
			<div class="row">
				<div class="col-xl-3 col-lg-4  col-md-6 bg-primary" style="text-align: center;"><img src="image/dog1.jpg" width=100px heigh=100px /></div>
				<div class="col-xl-3 col-lg-4  col-md-6 bg-danger" style="text-align: center;"><img src="image/dog1.jpg" width=100px heigh=100px /></div>
				<div class="col-xl-3 col-lg-4  col-md-6 bg-warning" style="text-align: center;"><img src="image/dog1.jpg" width=100px heigh=100px /></div>
				<div class="col-xl-3 col-lg-4  col-md-6 bg-warning" style="text-align: center;"><img src="image/dog1.jpg" width=100px heigh=100px /></div>
			</div>
		</div>
		</body>
</html>
